import reflex as rx

from components.alert import Alert
from flex_common.states import FileUploadState


class FileUploadPage:

    alert = Alert.alert(FileUploadState, "提示信息")

    @staticmethod
    @rx.page(route="/file_upload")
    def file_upload_page():
        """ 文件上传 """

        color = "rgb(107,99,246)"
        upload_id: str = "file_upload_id"

        return rx.vstack(
            rx.upload(
                rx.vstack(
                    rx.button("选择文件", color=color, bg="white", border=f"1px solid {color}"),
                    rx.text("将文件拖放到此处或单击以选择文件"),
                ),
                id=upload_id,
                border=f"1px dotted {color}",
                padding="5em",
                multiple=False,
                accept={
                    "image/png": [".png"],
                    "image/jpeg": [".jpg", ".jpeg"],
                    "image/gif": [".gif"],
                },
                # on_drop=FileUploadState.file_upload(rx.upload_files(upload_id=upload_id))
            ),
            rx.hstack(rx.foreach(rx.selected_files(upload_id), rx.text)),
            rx.button(
                "上传文件",
                on_click=FileUploadState.file_upload(rx.upload_files(upload_id=upload_id)),
            ),
            rx.button(
                "弹窗",
                on_click=FileUploadState.open_alert,
            ),
            rx.button(
                "清除",
                on_click=rx.clear_selected_files(upload_id),
            ),
            FileUploadPage.alert,
            padding="5em",
        )
